<template>
  <el-dialog v-model="isShow"
             :title="currentItem.workbook.name + '-图表下钻'"
             :append-to-body="true"
             destroy-on-close
             top="5vh">
    <div v-for="(item,index) in currentItem.drillDownList" :key="index">
      <div>
        <div class="menu-right">
          <el-dropdown trigger="click" size="medium">
            <i class="glyphicon glyphicon-option-horizontal" style="color: rgb(24, 144, 255);"></i>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="editDrillDown(item)">设置下钻
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <el-header v-if="item.name" style="height: 20px">
          {{ item.name }}
        </el-header>
        <el-main style="height: 360px;padding-top: 10px">
          <work-book-view :work-book-id="item.id" :ref="item.i" @initFinished="initDrillDown" :dashboard-item="item"
                          :parent-item="currentItem">
          </work-book-view>
        </el-main>
      </div>
    </div>
    <drill-down-view v-if="currentDrillItem.drillDownList && currentDrillItem.drillDownList.length>0"
                     @editDrillDown="editDrillDown" ref='drillViewDiag'
                     :current-item="currentDrillItem"></drill-down-view>
  </el-dialog>

</template>

<script>
import {defineComponent, nextTick, reactive, ref, toRefs} from 'vue'
import WorkBookView from "@/views/WorkBook/view";
import FormDialog from "@/components/formDialog";
import exSlot from "@/components/tableview/simple";
import {ElNotification} from "element-plus";

export default defineComponent({
  name: "drillDownView",
  components: {
    WorkBookView,
    FormDialog,
    exSlot
  },
  props: {currentItem: Object},
  emits: ['editDrillDown'],
  setup(props, cxt) {
    const drillViewDiag = ref(null)
    const {currentItem} = toRefs(props)
    const currentDrillItem = ref({})
    const state = reactive({
      isShow: false
    })
    const editDrillDown = (item) => {
      cxt.emit('editDrillDown', item)
      initDrillDown(item.currentEditChart, item)
    }
    const initDrillDown = (currentEditChart, item) => {
      currentEditChart.onselected = (data) => {
        if (item.drillDownList && item.drillDownList.length > 0) {
          item.param = data;
          currentDrillItem.value = item
          nextTick(() => {
            drillViewDiag.value.isShow = true
          })
        } else {
          ElNotification({
            title: '提示',
            message: '已经没有东西下钻啦',
            type: 'info',
            position: 'bottom-right'
          })
        }
      }
    }
    return {
      currentDrillItem,
      currentItem,
      ...toRefs(state),
      editDrillDown,
      drillViewDiag,
      initDrillDown
    }
  }
})
</script>

<style scoped>
.menu-right {
  position: relative;
  float: right;
  right: 20px;
  top: 6px;
  padding: 0;
  margin: 0;
}
</style>
